<!--  -->
<template>
  <el-form :label-width="formLabelWidth" @submit.native.prevent>
    <el-form-item :label="title" style="margin-bottom:0px;">
      <el-input size="mini" :style="'width:'+width+';'" v-model="link.href" maxlength="128" placeholder="链接地址">
      </el-input>
      <el-radio-group style="margin-left:24px;" v-model="link.target">
        <el-radio :label="'_self'">当前页面跳转</el-radio>
        <el-radio :label="'_blank'">新打开页面跳转</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  mounted () {
    this.link = this.defValue
    if (!this.link.target) {
      this.link.target = '_self'
    }
  },
  props: {
    formLabelWidth: {
      type: String,
      default: '120px'
    },
    defValue: {
      type: Object
    },
    chgValue: {
      type: Function
    },
    title: {
      type: String,
      default: '链接'
    },
    width: {
      type: String,
      default: '320px'
    }
  },
  data () {
    return {
      link: {
        href: '',
        target: ''
      }
    }
  },
  watch: {
    link: {
      handler () {
        this.chgValue(this.link)
      },
      deep: true
    }
  },
  methods: {
    setLink (link) {
      this.link = link
    }
  }
}

</script>
